<template>
  <div>
    <div class="mainfoor">
      <div class="top1">
        <span class="huxing">户型</span>
        <van-grid :column-num="2" center :gutter="15">
          <van-grid-item
            :text="itms.label"
            v-for="(itms, index) in roomType"
            :key="index"
            @click="active1(itms)"
            :class="{ active: top1List1.indexOf(itms.label) !== -1 }"
          />
        </van-grid>
      </div>
      <div class="top2">
        <span class="huxing">朝向</span>
        <van-grid :column-num="2" :gutter="15">
          <van-grid-item
            v-for="(itms, index) in oriented"
            :key="index"
            :text="itms.label"
            @click="active2(itms)"
            :class="{ active: top1List2.indexOf(itms.label) !== -1 }"
          />
        </van-grid>
      </div>
      <div class="top3">
        <span class="huxing">楼层</span>
        <van-grid :column-num="2" :gutter="15">
          <van-grid-item
            :text="itms.label"
            v-for="(itms, index) in floor"
            :key="index"
            @click="active3(itms)"
            :class="{ active: top1List3.indexOf(itms.label) !== -1 }"
          />
        </van-grid>
      </div>
      <div class="top4">
        <span class="huxing">房屋亮点</span>
        <van-grid :column-num="2" :gutter="15">
          <van-grid-item
            :text="itms.label"
            v-for="(itms, index) in character"
            :key="index"
            @click="active4(itms)"
            :class="{ active: top1List4.indexOf(itms.label) !== -1 }"
          />
        </van-grid>
      </div>
      <van-button type="default">默认按钮</van-button>
      <van-button type="primary">主要按钮</van-button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Info',
  props: {
    //楼层
    floor: {
      type: Array,
      require: true
    },
    //朝向
    oriented: {
      type: Array,
      require: true
    },
    //户型
    roomType: {
      type: Array,
      require: true
    },
    //房屋亮点
    character: {
      type: Array,
      require: true
    }
  },
  data() {
    return {
      top1List1: [],
      top1List2: [],
      top1List3: [],
      top1List4: []
    }
  },
  computed: {
    // top1List() {
    //   top1List1.indexOf
    // }
  },
  methods: {
    active1(a) {
      const b = this.top1List1.indexOf(a.label)
      if (b === -1) {
        this.top1List1.push(a.label)
      } else {
        this.top1List1 = this.top1List1.filter((itms) => itms !== a.label)
      }
    },
    active2(a) {
      const b = this.top1List2.indexOf(a.label)
      if (b === -1) {
        this.top1List2.push(a.label)
      } else {
        this.top1List2 = this.top1List2.filter((itms) => itms !== a.label)
      }
    },
    active3(a) {
      const b = this.top1List3.indexOf(a.label)
      if (b === -1) {
        this.top1List3.push(a.label)
      } else {
        this.top1List3 = this.top1List3.filter((itms) => itms !== a.label)
      }
    },
    active4(a) {
      const b = this.top1List4.indexOf(a.label)
      if (b === -1) {
        this.top1List4.push(a.label)
      } else {
        this.top1List4 = this.top1List4.filter((itms) => itms !== a.label)
      }
    }
  }
}
</script>

<style scoped lang="less">
:deep(.mainfoor) {
  .active {
    border: solid 2px red;
    border-radius: 5px;
  }
  .van-grid-item {
    width: 180px;
    margin-right: 15px;
    height: 70px;
    padding: unset !important;
    flex-basis: unset !important;
  }
}
</style>
